<template>
  <div class="review">
    <div class="review-title">预计送达时间：2023年7月23日</div>
    <div class="review-order">
      <div class="review-order-item">
        <div class="review-order-item-left">
          <img src="/img/g7small.png" alt="">
        </div>
        <div class="review-order-item-right">
          <div class="review-order-item-right-title">巴洛克华冠</div>
          <div class="review-order-item-right-price">￥599.00</div>
          <div class="review-order-item-right-num">数量：1</div>
        </div>
      </div>
      <div class="review-order-item">
        <div class="review-order-item-left">
          <img src="/img/g7small.png" alt="">
        </div>
        <div class="review-order-item-right">
          <div class="review-order-item-right-title">巴洛克华冠</div>
          <div class="review-order-item-right-price">￥599.00</div>
          <div class="review-order-item-right-num">数量：1</div>
        </div>
      </div>
    </div>
    <div class="review-address">
      <div class="review-address-title">收货地址</div>
      <div class="review-address-content">
        <div class="review-address-content-name">张三</div>
        <div class="review-address-content-phone">13345678909</div>
        <div class="review-address-content-address">
          上海市市辖区杨浦区图书馆
        </div>
      </div>
    </div>
    <div class="review-method">
      <div class="review-method-title">支付方式</div>
      <div class="review-method-content">银联支付</div>
    </div>
    <el-dialog align-center v-model="centerDialogVisible" title="您的支付即将跳转到相关平台..." width="500" :show-close="false" center>
    <span style="display: inline-block;width: 100%;text-align: center;">
      即将跳转到支付页面，支付完成后请在下方点击按钮继续完成操作
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">未完成支付</el-button>
        <el-button :loading="loading" color="#088395" type="primary" @click="getPayStatus">
          已完成支付
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import emiter from '@/bus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useProfileState } from '@/state/profileState'

const profileState = useProfileState()

const router = useRouter()

// 用户点击"确认支付"按钮后触发
emiter.on('toPayPage', () => {
  // 跳转到支付界面，并异步后修改数据库订单状态
  console.log('跳转到支付界面')
  centerDialogVisible.value = true
  // 完成后续操作............
})

const centerDialogVisible = ref(false)

// 按钮上是否展示加载图标
const loading = ref(false)

onMounted(() => {
  // 获取到地址id
  const addressId = sessionStorage.getItem('addressId')
  // 完成后续操作............

  // 获取到支付方式对象
  const payMethod = JSON.parse(sessionStorage.getItem('payMethod') as string)
  // 完成后续操作............
})

// 用户点击"已完成支付"后触发
const getPayStatus = () => {
  loading.value = true

  // 开始异步操作，去后端取数据，若真的完成了支付（判断订单状态是否为已完成支付），就跳转到支付完成界面，否则就消息提示未完成支付
  setTimeout(() => {
    centerDialogVisible.value = false
    loading.value = false
    // 跳转到支付完成界面
    // 若支付真的完成了，则弹出消息支付完成，否则弹出未完成支付
    ElMessage({
      message: '支付成功！',
      type: 'success'
    })

    // 若支付成功，则跳转到我的订单界面，如果支付失败，则只弹出消息，不跳转
    profileState.setSelectIconId(2)

    router.push({
      name: 'profile_order'
    })
  }, 2000)
}
</script>

<style lang="less" scoped>
@primary-color: #088395;
@primary-hover-color: rgb(22, 162, 184);

.review {
  font-family: 'Helvetica';

  .review-title {
    color: rgb(20, 28, 29);
    font-size: 20px;
    font-weight: 700;
  }

  .review-order {
    margin-top: 30px;

    .review-order-item {
      display: flex;
      box-sizing: border-box;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(163, 170, 171, 0.2);

      .review-order-item-left {
        width: 79px;
        height: 79px;
        box-sizing: border-box;
        border: 1px solid rgba(163, 170, 171, 0.2);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 55px;
          height: 55px;
        }
      }

      .review-order-item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        color: rgb(20, 28, 29);
        font-size: 16px;

        .review-order-item-right-title {
          font-weight: 700;
        }

        .review-order-item-right-price {
          font-weight: 400;
        }

        .review-order-item-right-num {
          font-weight: 400;
        }
      }
    }

    .review-order-item:not(:last-child) {
      margin-bottom: 20px;
    }
  }

  .review-address {
    margin-top: 30px;
    box-sizing: border-box;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(163, 170, 171, 0.2);

    .review-address-title {
      color: rgb(20, 28, 29);
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .review-address-content {
      div:not(:last-child) {
        margin-bottom: 10px;
      }

      .review-address-content-name {
        color: rgb(20, 28, 29);
        font-size: 18px;
        font-weight: 700;
      }

      .review-address-content-phone {
        color: rgb(20, 28, 29);
        font-size: 16px;
        font-weight: 400;
      }

      .review-address-content-address {
        color: rgb(20, 28, 29);
        font-size: 16px;
        font-weight: 400;
      }
    }
  }

  .review-method {
    color: rgb(20, 28, 29);
    font-weight: 700;
    margin-top: 30px;
    box-sizing: border-box;
    padding-bottom: 29px;
    border-bottom: 1px solid rgba(163, 170, 171, 0.2);

    .review-method-title {
      font-size: 20px;
      margin-bottom: 29px;
    }

    .review-method-content {
      font-size: 18px;
    }
  }
}
</style>
